Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
css in your javascript
npm install glamor --save
usage
import { css } from 'glamor'
// make css rules
let rule = css({
color: 'red',
':hover': {
color: 'pink'
},
'@media(min-width: 300px)': {
color: 'green',
':hover': {
color: 'yellow'
}
}
})
// add as data attributes
<div {...rule} {...another}>
zomg
</div>
// or as classes
<div className={`${rule} ${another}`}>
zomg
</div>
// merge rules for great justice
let mono = css({
fontFamily: 'monospace'
})
let bolder = css({
fontWeight: 'bolder'
})
<div {...css(mono, bolder)}>
bold code!
</div>
This expands on ideas from @vjeux's 2014 css-in-js talk. We introduce an api to annotate arbitrary dom nodes with style definitions ("rules") for, um, the greater good.
@media
queries@supports
statements@font-face
/ @keyframes
:hover
, etc(thanks to BrowserStack for providing the infrastructure that allows us to run our build in real browsers.)
glamor/reset
- include a css resetcss
prop on all your react elementsglamor/react
- helpers for themes, @vars
glamor/jsxstyle
- react integration, à la jsxstyleglamor/aphrodite
- shim for aphrodite stylesheetsglamor/utils
- a port of postcss-utilitiesglamor/ous
- a port of the skeleton css frameworkglamor/styled
- an experimental port of styled-componentsthere are two methods by which the library adds styles to the document -
as a compromise, we enable the former 'speedy' mode NODE_ENV=production
, and disable it otherwise. You can manually toggle this with the speedy()
function.
while glamor shares most common attributes of other inline style / css-in-js systems, here are some key differences -
simulate
helper. very useful, especially when combined when hot-loading and/or editing directly in devtools.I get it
FAQs
inline css for component systems
The npm package glamor receives a total of 58,498 weekly downloads. As such, glamor popularity was classified as popular.
We found that glamor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.